<template>
	<view class="content">

		<uni-swiper-dot :info="logoList" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in logoList" :key="index">
					<!-- <view class="swiper-item">
							{{item.content}}
						</view> -->
					<image :src="item" style="width: 100%;" @click="clickImg(item)"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<div class="hideBg"></div>

		<div class="baseCon">
			<div class="item-title">{{form.stationName}}</div>
			<div class="same-w" style="margin-top: 6px;">
				<image class="youx" src="/static/images/youxuan.png"></image>
				<div class="tagyou" v-if="form.stationType==1||form.stationType==0">加油站</div>
				<div class="tagyou tagqi" v-if="form.stationType==2||form.stationType==0">加气站</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<span style="color: #83878E;font-size: 12px;">营业中&nbsp;&nbsp;&nbsp;{{form.openTime}}</span>
			</div>
			<div class="zline"></div>

			<div class="same-w">
				<div class="same-lef" style="width: 460rpx;">
					<div style="font-size: 13px;">{{form.city}}{{form.district}}{{form.address}}</div>
					<div style="font-size:12px;color: #83878E;margin-top: 4px;">距你 {{distance}}km</div>
				</div>
				<div class="zflex" style="justify-content: center;">
					<div style="text-align: center;margin-right: 8px;" @click="openArea(form.latitude,form.longitude)">
						<image class="roundImg" src="/static/images/area.png"></image>
						<div class="roundtxt">导航</div>
					</div>
					<div style="text-align: center;" @click="callKefu()">
						<image class="roundImg" src="/static/images/call.png"></image>
						<div class="roundtxt">客服电话</div>
					</div>
				</div>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="monBox monBoxwid10" @click="toggle">
				<view style="margin-right: auto;">{{oilData.oilName?oilData.oilName:'请选择'}}</view>
				<image src="/static/icondown.png"></image>
			</div>
			<div class="zflex zcondd" style="align-items: flex-end;" v-if="oilData.oilName">
				<div class="fsize1">团油价&nbsp;¥</div>
				<div class="fsize2">{{oilData.ndrcPrice}}</div>
				<div class="fsize1">{{qyIdx==2?'/kg':'/L'}}</div>
				<div class="fsize1 colorf4" style="margin-left: 16px;">挂牌价&nbsp;¥</div>
				<div class="fsize2 colorf4">{{oilData.discountPrice}}</div>
				<div class="fsize1 colorf4">{{qyIdx==2?'/kg':'/L'}}</div>
			</div>
			<div class="zflex" style="margin-top: 12px;align-items: center;">
				<div class="monBox monBoxIpt">
					<div class="monBoxIpt-lef">￥</div>
					<input placeholder="请输入加油金额" v-model="iptMoney" type="digit" @blur="moneyChange"></input>
				</div>
				<div class="rigMon">约{{yhdata.liters}}{{qyIdx==2?'kg':'L'}}</div>
			</div>
			<div class="monB-w" style="margin-top: 12px;">
				<div class="monBox" @click="moneyChose(200)">200</div>
				<div class="monBox" @click="moneyChose(500)">500</div>
				<div class="monBox" @click="moneyChose(1000)">1000</div>
				<div class="monBox" @click="moneyChose(2000)">2000</div>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="item-title">合计优惠</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">总价</div>
				<div class="detail-rig">¥ {{iptMoney}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">优惠</div>
				<div class="yhbox">优惠-￥{{yhdata.discount}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">实付</div>
				<div class="detail-rig">¥ {{yhdata.actualPayment}}</div>
			</div>
		</div>
		<div style="height: 100px;"></div>

		<div class="fix-bom">
			<div style="margin-right: auto;">实付：<span class="pay-t1">￥</span><span
					class="pay-t2">{{yhdata.actualPayment}}</span></div>
			<div class="btn-pay" @click="addOrder">支付</div>
		</div>

		<uni-popup ref="popup" background-color="#fff" type="bottom" border-radius="10px 10px 0 0" :mask-click="false">
			<view class="zdyPopWrap">
				<view class="zdypopTit">
					<div>选择油号油枪</div>
					<uni-icons type="closeempty" size="20" class="zdypopClose" @click="closePopup"></uni-icons>
				</view>
				<div>油品</div>
				<div class="zflex zcenter rqhead">
					<div class="rqLabel" :class="qyIdx==3?'rqLabelS':''" v-if="form.stationType==1||form.stationType==0"
						@click="choseYou(3)">汽油</div>
					<div class="rqLabel" :class="qyIdx==1?'rqLabelS':''" v-if="form.stationType==1||form.stationType==0"
						@click="choseYou(1)">柴油</div>
					<div class="rqLabel" :class="qyIdx==2?'rqLabelS':''" v-if="form.stationType==2||form.stationType==0"
						@click="choseYou(2)">天然气</div>
				</div>
				<div>油号</div>
				<div class="zflex zcenter rqhead">
					<div class="rqLabel" v-for="(item,index) in listoil" :key="index"
						:class="oilIdex==index?'rqLabelS':''" @click="choseOil(index)">{{item.oilName}}</div>
				</div>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		stationDetail,
		getOilByStationId,
		getAmount,
		addDriver,
	} from '@/request/api.js'
	export default {
		components: {},
		data() {
			return {
				logoList: [],
				current: 0,
				mode: 'round',
				qyIdx: 1,
				eid: '',
				distance: '',
				form: {},
				iptMoney: '',
				listoil: [],
				oilIdex: null,
				oilData: {
					oilId: null,
					oilName: '',
					discountPrice: null,
					ndrcPrice: null,
				},
				yhdata: {
					actualPayment: '', //实付
					discount: '', //优惠
					liters: '', //量
				},
			}
		},
		mounted() {
			//this.open()
		},
		onLoad(e) {
			this.eid = e.id
			this.distance = e.distance
			this.getDetail()
		},
		onShow() {},
		methods: {
			getDetail() {
				stationDetail(this.eid).then(res => {
					this.form = res.data
					this.logoList = this.form.logo.split(',')

					if (this.form.stationType == 1) {
						this.qyIdx = 1
					} else if (this.form.stationType == 2) {
						this.qyIdx = 2
					}
					this.getoils()
				})
			},
			getoils() {
				let data = {
					oilType: this.qyIdx,
					stationId: this.eid
				}
				getOilByStationId(data).then(res => {
					this.listoil = res.data
				})
			},

			choseOil(idx) {
				this.oilIdex = idx
				this.oilData = this.listoil[idx]
				this.closePopup()
				if (this.iptMoney) {
					this.moneyChange()
				}
			},

			change(e) {
				this.current = e.detail.current;
			},
			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},
			callKefu() {
				const phone = getApp().globalData.kefuPhone
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {

					}
				})
			},
			moneyChange() {
				if (!this.oilData.oilId) {
					return
				}
				let data = {
					inAmount: this.iptMoney,
					oilId: this.oilData.oilId
				}
				getAmount(data).then(res => {
					this.yhdata = res.data
				})
			},
			moneyChose(e) {
				this.iptMoney = e
				this.moneyChange()
			},
			openArea(lat, lon) {
				uni.openLocation({
					latitude: lat,
					longitude: lon,
					success: function(res) {

					}
				});
				// uni.getLocation({
				// 	type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
				// 	success: function(res) {
				// 		console.log('success', res)
				// 	},
				// })
			},
			choseYou(e) {
				this.qyIdx = e
				this.oilIdex = null
				this.getoils()
			},
			toggle() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},

			addOrder() {
				this.goPage('/pages/index/paySuccess?id=2')
				return
				if (!this.oilData.oilId) {
					uni.$u.toast('请选择油品')
					return
				}
				if (!this.iptMoney) {
					uni.$u.toast('请输入加油金额')
					return
				}
				let data = {
					actualPayment: this.yhdata.actualPayment, //实付金额
					oilId: this.oilData.oilId,
					oilStationId: this.eid,
					originalPrice: this.iptMoney, //原价
					refueleQuantity: this.yhdata.liters, //加油总量L
				}
				addDriver(data).then(res => {
					// this.goPage('/pages/index/paySuccess')
				})
			},
			clickImg(url) {
				uni.previewImage({
					current: url,
					urls: this.logoList,
					indicator: 'none',
					loop: false
				});
			},

		}
	}
</script>

<style scoped>
	uni-swiper {
		height: 420rpx;
	}

	.fsize1 {
		font-size: 13px;
		color: #FF6C1E;
	}

	.fsize2 {
		font-size: 18px;
		font-weight: 500;
		color: #FF6C1E;
	}

	.colorf4 {
		color: #4E5969;
	}

	.zcondd {
		display: flex;
		padding: 12rpx 24rpx;
		align-items: center;
		align-self: stretch;
		border-radius: 4px;
		background: #FFF5F2;
		margin-top: 12px;
	}
</style>